<template>
  <div>
    <van-icon name="arrow-left" @click="return1" />
    <van-search shape="round" v-model="search" placeholder="请输入搜索关键词" />
    <van-grid :column-num="2" :border="false">
      <router-link
        tag="div"
        :to="'/detail/' + item.id"
        v-for="item in searchAll"
        :key="item.id"
      >
        <div class="content">
          <img :src="uploads + item.img" alt="" style="width: 150px" />
          <p style="font-weight: bold">{{ item.title }}</p>
          <img
            :src="uploads + item.user_img"
            alt=""
            style="width: 30px; margin-right: 90px; border-radius: 15px"
          />
          <p style="margin-top:-48px;margin-left: -20px;">
            {{ item.username }}
          </p>
        </div>
      </router-link>
    </van-grid>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      searchAll: [],
      search: this.$route.query.search,
      uploads: this.$store.state.uploads,
    };
  },
  created() {
    axios
      .get("/api/qbs/api/article_serach.php?search=" + this.$route.query.search)
      .then((response) => {
        console.log(response.data.data);
        this.searchAll = response.data.data;
      });
  },
  methods: {
    return1() {
      history.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
>>> .van-tabs__content {
  margin-top: 50px;
}
>>> .van-grid {
  display: flex;
  margin: 7px;
}
.content {
  margin-left: 20px;
  margin-bottom: 60px;
  p {
    max-width: 150px;
    word-break: normal;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

>>> .van-search__content {
  border-radius: 20px;
  display: inline-block;
  position: relative;
  left: 13px;
  top: -10px;
  border: 1px solid lightpink;
}
.van-icon::before {
  display: inline-block;
  position: absolute;
  right: 162px;
  top: 10px;
  font-size: 22px;
  color: lightpink;
}
</style>
